<%@ page language="java" import="java.util.*,com.beans.*,com.dao.*" pageEncoding="UTF-8"%> 
<%
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
             
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
  <head>
    <base href="<%=basePath%>"> 
    
    <title>My JSP 'index.jsp' starting page</title>
    <link rel="stylesheet" type="text/css" href="css/maintable.css" ></link>
    <link rel="stylesheet" type="text/css" href="css/edittable.css"  ></link>  
		<link rel="stylesheet" type="text/css" href="css/validate.css"  ></link>  
		<script type="text/javascript"  src="js/jquery-1.8.0.js"></script>
		
		<script>
function delAll(pageIndex){
			if($("input[name=ck_id]:checked").size()==0)
				alert("请至少选一项!");
			else{
				if(confirm('确定要删除所选项吗')){
					$('form').attr('action',"GoodsServlet.do?flag=delAll&pageIndex="+pageIndex);
					
				}
			}
		}
		function  lock(id,pageIndex){
			if(confirm('确定要删除吗')){
				$('form').attr('action',"GoodsServlet.do?flag=delete&roleId="+id+"&pageIndex="+pageIndex);
				form1.submit();
		}
	}

		//根据已有元素,取得它的坐标	
		function getElemPos(obj) {
			var pos = {
				"top" : 0,
				"left" : 0
			};
			if (obj.offsetParent) {
				while (obj.offsetParent) {
					pos.top += obj.offsetTop;
					pos.left += obj.offsetLeft;
					obj = obj.offsetParent;
				}
			} else if (obj.x) {
				pos.left += obj.x;
			} else if (obj.x) {
				pos.top += obj.y;
			}
			
			return {
				x : pos.left,
				y : pos.top
			};

		}
		function showimg(item,id,des){
			var position = getElemPos(item);
			$("#img_div").show();
			$("#img_div").css("left", position.x - 150).css("top",position.y);
			$("#goods_picture").attr("src","GoodsServlet.do?flag=showImg&goodsId="+id);
			$("#imgdesc_div").html(des);
		}
		function hideimg(){
			$("#img_div").hide();
		}
		function jump (max){
			var pageIndex=document.getElementById("pageIndex").value
			if(pageIndex>0&&pageIndex<=max){
				window.location.href="GoodsServlet.do?flag=manage&pageIndex="+pageIndex+"&goodsName="+get('goodsName').value+"&select1="+get('select1').value+"&select2="+get('select2').value;
			}
			else{
				alert("输入页码有误,请重新输入");
			}
		}
		function get(id){
	    	return document.getElementById(id);
	    }
		 function c(name){
			 get(name).href+=("&goodsName="+get('goodsName').value+"&select1="+get('select1').value+"&select2="+get('select2').value);
		    }
		$(function(){
			
			$("#ch_checkall,#top_ch_checkall").click(function(){
				if(this.checked){
					$("input[name=ck_id]").attr("checked","checked");
				}else{
					$("input[name=ck_id]").removeAttr("checked");
				}		
			});
					
			$("table tr").mouseover(function(){
				$(this).css("background","#D3EAEF");
				$(this).siblings().css("background","white");
			});
			
			$("#select1").change(function(){
				$("#select2").empty();
				var pId=this.value;
				if(pId=="-1"){
					$("#select2").append("<option value=-1>小分类</option>");
				}
				else{
					$.ajax({
						url:"GoodsServlet.do",
						type:"get",
						cache:false,
						async:true,
						dataType:"json",   //一定不要写成大写
						data:{flag:"small",parentId:pId},  //把选中的一级菜单的ID传给服务端
						success:function(cateList){
			
							$.each(cateList,function(k,cate){
								var str="<option value='"+cate.id+"'>"+cate.cateName+"</option>" ;
								$("#select2").append(str);
							});	
						}
						
					});
				}
			});
			
			$("#select1").change();
			
		});
		
		</script>
    <style>
    .div_tools{
    		width:99.5%; 
			height:28px;
			background:#D3EAEF;
			margin:0px auto;
			margin-top:5px;
			margin-bottom:5px;
			font-size:12px;
			position:relative;	 
			
    	}
    	
    	.div_tools select{
    		height:22px;
    		font-size:12px;
			margin-top:3px;
    	}
    	
    	
    	#img_div{
    		display:none;
    		position: absolute;
    	}
    </style>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	
	
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
  </head>
  
  <body>
  	<div class ="div_title">
						<div class="div_titlename"> <img src="images/san_jiao.gif" ><span>商品列表</span></div>
						<div class="div_titleoper">
							<input type="checkbox" id="top_ch_checkall"/> 全选 <a href="goods/goods_add.jsp"> <img src="images/add.gif"/>添加 </a> <a href="javascript:delAll(${page.pageIndex})"><img src="images/del.gif"/>删除</a> </div>
				 </div>
				 <%
		 		CateDao dao=new CateDao();
		 		List<CateInfo> cateList =dao.getCateList(0);
		 		request.setAttribute("cateList", cateList);
		 		%>
				 <form action="GoodsServlet.do?flag=manage"  name="form1" method="post">
				 	 <div class ="div_tools">
				 	   &nbsp; &nbsp;
				 <select id="select1" name="select1">
				 <option  value=-1>大分类</option>
				 <c:forEach var="cate" items="${cateList}">
						   <c:choose>
						   <c:when test="${cate.id==param.select1}">
								<option value="${cate.id}"  selected>${cate.cateName}</option>
							</c:when>
							<c:otherwise><option value="${cate.id}">${cate.cateName}</option></c:otherwise>
						   </c:choose>
						   </c:forEach>
				 </select>
				 &nbsp;
				  <select id="select2" name="select2">
				  <option value=-1>小分类</option>
				 </select>
				  &nbsp; &nbsp;
				  商品名称:<input id=goodsName name=goodsName value="${param.goodsName }">
				  <button>查询</button> 
			   </div>
				 <table class="main_table" >
				       <tr>
				 				<th><input type="checkbox" id="ch_checkall" /></th>	<th>名称</th> 	<th>单位</th>	<th>单价</th>  <th>大分类</th> 	<th>小分类</th> <th>操作</th> 
				 		</tr>
				 		
				 				<c:forEach var="goods" items="${goodsList }">
				 		<tr>
				 			<td>
				 					<input type="checkbox" name="ck_id" value="${goods.id }" /> 
				 				</td>
				 				<td>${goods.goodsName}</td>	
				 				<td>${goods.unit }</td>
				 				<td>${goods.price}</td>
				 				<td>${goods.bigCateName }</td>
				 				<td>${goods.smallCateName}</td>	
				 				<td>
								<a href="javascript:void(0)" onmouseover="showimg(this,'${goods.id }','${goods.des}')" onmouseout="hideimg()">查看</a> | 
					 				<a href="goods/goods_modify.jsp?goodsId=${goods.id }&note=${goods.des}&goodsName=${goods.goodsName}&danwei=${goods.unit }&price=${goods.price}&select1=${goods.bigCateId}&select2=${goods.smallCateId}&pwdconfirm=${goods.producter}">修改</a> | 
					 			    <a href="javascript:lock(${goods.id },${page.pageIndex})">删除</a> 
				 				</td>
				 		</tr>
				 		</c:forEach>
				 		

				   		 
				 	
				</table>
				</form>
				
			<div class="div_page" >
					  <div class="div_page_left">    共有 <label>${page.rowCount}</label> 条记录，当前第 <label>${page.pageIndex}</label> 页，共 <label>${page.pageCount }</label> 页	</div>		
					  <div class="div_page_right" >
					  <c:choose> 	 
					  			<c:when test="${page.hasPre}">
					  			 <a id="sy" href="GoodsServlet.do?flag=manage&pageIndex=1" onclick=" c('sy')">首页</a>
				  	 			 <a id="syy" href="GoodsServlet.do?flag=manage&pageIndex=${page.pageIndex-1}"  onclick=" c('syy')">上一页</a>
					  			 </c:when>
					  			 <c:otherwise>
									首页
									上一页
								 </c:otherwise>
								 </c:choose>
								 <c:choose> 	
								 <c:when test="${page.hasNext}">
					  			 <a id="xyy" href="GoodsServlet.do?flag=manage&pageIndex=${page.pageIndex+1}" onclick=" c('xyy')">下一页</a>
					  			 <a id="wy" href="GoodsServlet.do?flag=manage&pageIndex=${page.pageCount }"  onclick=" c('wy')">尾页</a>
				  	 		   	 </c:when>
								 <c:otherwise>
									下一页
									尾页
								 </c:otherwise>
								 </c:choose>
					  	  <button onclick=jump(${page.pageCount})>转到</button>
					  	 <input type="text" name="pageIndex" id="pageIndex" value="${page.pageIndex}" /> 页
					  	
					   </div>
						
				</div>
				<div id="img_div">
					<img id="goods_picture" width="140" height="190" />
					<div id="imgdesc_div"></div>
				</div>
				<script>
				var msg='${msg}';
				if(msg!=''){
					alert(msg);
				}
				</script>
  </body>
</html>